<template>
    <div class="radio">
        <Header :isBack="isBack" :title="title"></Header>
        <div class="top-swiper bg-f center">
            <div class="banner">
                <swiper :options="swiperOption" class="swiper" v-if="imgshow.length > 0">
                    <swiper-slide v-for="(item,index) in imgshow" :key="index">
                        <div class="item padding-24">
                            <img :src="item.ad_image" alt class="imgList" />
                        </div>
                        
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
        <div class="menu-list bg-f padding-24 space-between">
            <div class="cell" v-for="(item,index) in menulist" :key="index">
                <router-link :to="item.url">
                    <img :src="item.img" alt="">
                    <p class="fs-32">{{item.title}}</p>
                </router-link>
            </div>
        </div>
        <div class="todaysgood bg-f">
            <div class="top space-between arrow-right padding-24">
                <p class="fs-32">今日优选</p>
                <router-link to="radiotadaygood" class="fs-26 color-9">更多</router-link>
            </div>
            <div class="list">
                <div
                  class="list-item padding-24 space-between"
                  v-for="(item,index) in radiolist" :key="index"
                  @click="jumpRadioDetail(item.radio_program_id)"
                  >
                    <img :src="item.program_cover" alt="" class="left">
                    <div class="right space-between">
                        <div class="flex-column">
                            <p class="fs-32 overFlow">{{item.program_name}}</p>
                            
                            <div class="center-col">
                                <img :src="item.user_avator" alt="" class="yuan">
                                <p class="fs-22">{{item.nickname}}</p>
                                <img :src="fire" alt="" class="fire">
                                <p class="fs-22">{{item.view_number}}</p>
                            </div>
                        </div>
                        <div class="play">
                            <img :src="playing" alt="" v-if="item.isplay==1">
                            <img :src="noplay" alt="" v-else>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="recommended bg-f">
            <div class="top padding-24 space-between">
                <p class="fs-32">电台推荐</p>
                <p class="fs-26 color-9" @click="change">换一换</p>
            </div>
            <div class="list flex wrap">
                <div class="list-item" v-for="item in commendRaido" @click="gotoradiodetail(item)">
                    <div class="top">
                        <img :src="item.radio_cover" alt="" class="cove">
                        <div class="flex">
                            <img :src="headset" alt="">
                            <p class="fs-24 color-f">{{item.view_number}}</p>
                        </div>
                    </div>
                    <div class="text ">
                        <p class="overFlow-2 fs-26 color-6">{{item.radio_name}}</p>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'电台',
            imgshow:[],
            page:1,
            total:9,
            noplay:require('../../assets/index/playradio.png'),
            headset:require('../../assets/account/headset.png'),
            playing:require('../../assets/index/playing.png'),
            fire:require('../../assets/mine/fire.png'),
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // 循环
                loop: false,
                // 设定初始化时slide的索引
                initialSlide: 0,
                // 滑动速度
                speed:500,
                // 滑动方向
                loopedSlides :1,
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                slidesPerView: 'auto',
                pagination: {
                    el: '.swiper-pagination'
                },
                
                on: {
                // 滑动之后回调函数
                slideChangeTransitionStart: function () {
                    /* realIndex为滚动到当前的slide索引值 */
                    this.imgIndex = this.realIndex - 1
                }
                },
            },
            menulist:[
                {
                    img:require('../../assets/index/diantaifenlei.png'),
                    title:'电台分类',
                    url:'radiotypes'
                },
                {
                    img:require('../../assets/index/diantaipaihang.png'),
                    title:'电台排行',
                    url:'radioranking'
                },
                {
                    img:require('../../assets/index/diandaijp.png'),
                    title:'今日优选',
                    url:'radiotadaygood'
                },
                {
                    img:require('../../assets/index/diantaikt.png'),
                    title:'电台推荐',
                    url:'radiorecommended'
                }
            ],
            radiolist:[
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感gfebgfntg梵蒂冈如果飞哥哥和糖尿病白癜风够不够疼',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                //     isplay:1,
                // },
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                //     isplay:0,
                // }
            ],
            commendRaido:[]
        }
    },
    created(){
        this.getswiperimg()
        this.getrecommendRaido()
        this.getradioProgram()
    },
    methods:{
        getswiperimg(){
            var url = this.$host1 + `admin/radio/adList`;
            this.$axios.get(url).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        this.imgshow=resData.data
                    }else{
                        this.AlertWin(resData.message);
                    }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gotoradiodetail(i){
            this.$router.push({
                path: '/radiodetail',
                query: {
                    type: i.radio_id,
                }
            })
        },
        jumpRadioDetail(id){
            this.$router.push({
                path: '/radiodetail',
                query: {
                    type: id,
                }
            })
        },
        getrecommendRaido(){
            let url = this.$host1 + `home/radio/recommendRaido`
            this.$axios.get(url,{
                params:{
                    page:1,
                    pageSize:9,
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.commendRaido=resData.data.result
                }else{
                    this.commendRaido=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.commendRaido=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        change(){
            this.page++
            if(this.page<=this.total/9){
                this.page=this.page
            }else{
                this.page=1
            }
            //console.log(this.page)
            this.getmorerecommendRaido()
        },
        getmorerecommendRaido(){
            let url = this.$host1 + `home/radio/recommendRaido`
            this.$axios.get(url,{
                params:{
                    page:this.page,
                    pageSize:9,
                    type:2
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.commendRaido=resData.data.result
                    this.total=resData.data.total_number
                }else{
                    this.commendRaido=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.commendRaido=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        //今日优选
        getradioProgram(){
            let url = this.$host1 + `home/radio/radioProgram`
            this.$axios.get(url,{
                params:{
                    type:1
                }
            }).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.radiolist=resData.data
                }else{
                    this.radiolist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.radiolist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        }
    }
}
</script>
<style lang="scss">
.radio{
    .top-swiper{
        margin-top: 1rem;
        height: 3.6rem;
        padding: 0.3rem 0;
        box-sizing: border-box;
        .banner{
            width: 100%;
            height: 100%;
            .swiper{
                width: 100%;
                height: 100%;
                .swiper-slide{
                    width: 100%;
                    height: 100%;
                    .item{
                        width: 100%;
                        height: 100%;
                        
                        // padding: 0 0.24rem;
                        img{
                            border-radius: 0.1rem;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                .swiper-pagination{
                    .swiper-pagination-bullet{
                        background-color: rgba(245, 245, 245, 0.9)
                    }
                    .swiper-pagination-bullet-active{
                        background-color: #9523C7
                    }
                }
            }
            //background-color: greenyellow;
        }
    }
    .menu-list{
        height: 2rem;
        //background-color: greenyellow;
        a{
            img{
                width: 1rem;
                height: 1rem;
                margin: 0 auto;
            }
            p{
                text-align: center;
                margin-top: 0.2rem;
            }
        }
    }
    .todaysgood{
        margin-top: 0.2rem;
        height: auto;
        .top{
            height: 1rem;
            .fs-26 {
                position: absolute;
                right: 0.5rem;
            }
        }
        .list{
            .list-item{
                height: 1.75rem;
                width: 100%;
                border-bottom: 0.01rem solid #e9e9e9;
                .left{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 0.22rem;
                    object-fit: cover;
                }
                .right{
                    height: 1.3rem;
                    width: calc(100% - 1.8rem);
                    //background-color: greenyellow;
                    .flex-column{
                        height: 100%;
                        .overFlow{
                            width: 4.5rem;
                        }
                    }
                    .yuan{
                        width: 0.56rem;
                        height: 0.56rem;
                        margin-right: 0.2rem;
                    }
                    .fire{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-left: 0.3rem;
                        margin-right: 0.2rem;
                    }
                    .fires{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-right: 0.2rem;
                    }
                    .play{
                        img{
                            width: 0.44rem;
                            height: 0.44rem;
                        }
                    }
                }
            }
        }
    }
    .recommended{
        margin-top: 0.2rem;
        height: auto;
        .top{
            height: 1rem;
        }
        .list{
            width: 100%;
            height: auto;
            padding: 0 0.15rem;
            box-sizing: border-box;
            .list-item{
                // width: 7.2rem;
                // height: 3.36rem;
                width: 2.2rem;
                height: 3.36rem;
                margin: 0 0.1rem 0.2rem;
                //background-color: greenyellow;
                .top{
                    position: relative;
                    width: 2.2rem;
                    height: 2.2rem;
                    .flex{
                        position: absolute;
                        width: auto;
                        height: 0.3rem;
                        right: 0.2rem;
                        top: 0.2rem;
                        align-items: flex-start;
                        img{
                            width: 0.3rem;
                            height: 0.2rem;
                            margin-right: 0.1rem;
                        }
                    }
                    .cove{
                        width: 100%;
                        height: 100%;
                        border-radius: 0.12rem;
                        object-fit: cover;
                    }
                }
                .text{
                    padding-top: 0.2rem;
                    box-sizing: border-box;
                    height: 1.16rem;
                    line-height: 0.4rem;
                }
            }
        }
    }
}
</style>